﻿@{
    string style="background: #0092ff; padding: 8px 0;";
    Dictionary<string, int> gutter = new()
    {
        ["xs"] = 8,
        ["sm"] = 16,
        ["md"] = 24,
        ["lg"] = 32,
        ["xl"] = 48,
        ["xxl"] = 64
    };
}
<div>
    <Divider Orientation="left">Horizontal</Divider>
    <Row Gutter="16">
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
    </Row>
    <Divider Orientation="left">Responsive</Divider>
    <Row Gutter="@gutter">
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
    </Row>
    <Divider Orientation="left">Vertical</Divider>
    <Row Gutter="(16,24)">
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
        <AntDesign.Col Class="gutter-row" Span="6">
            <div style="@style">col-6</div>
        </AntDesign.Col>
    </Row>

</div>

<style>
    .gutter-box {
        padding: 8px 0;
        background: #00a0e9;
    }
</style>
